<div class="min-h-full bg-white px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
    <div class="mx-auto max-w-max">
        <main class="sm:flex">
            <p class={"text-4xl font-bold tracking-tight text-#{@color}-600 sm:text-5xl"}><%= @code %></p>
            <div class="sm:ml-6">
                <div class="sm:border-l sm:border-gray-200 sm:pl-6">
                    <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"><%= @title %></h1>
                    <p class="mt-1 text-base text-gray-500"><%= assigns[:message] || @message_default %></p>
                </div>
                <div class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
                    <a href={Routes.website_path(@conn, :index)} class={"inline-flex items-center rounded-md border border-transparent bg-#{@color}-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-#{@color}-700 focus:outline-none focus:ring-2 focus:ring-#{@color}-500 focus:ring-offset-2"}>Go back home</a>
                    <a href={Azimutt.config(:azimutt_github_issues)} class={"inline-flex items-center rounded-md border border-transparent bg-#{@color}-100 px-4 py-2 text-sm font-medium text-#{@color}-700 hover:bg-#{@color}-200 focus:outline-none focus:ring-2 focus:ring-#{@color}-500 focus:ring-offset-2"}>Contact support</a>
                </div>
            </div>
        </main>
    </div>
</div>
